.fontSize (@px, @attr: font-size) {
  @vw: (@px / 1920) * 100;
  @{attr}: ~"@{vw}vw";
}

.lineHeight (@px, @attr: line-height) {
  @vh: (@px / 1080) * 100;
  @{attr}: ~"@{vh}vh";
}

.width (@px, @attr: width) {
  @vw: (@px / 1920) * 100;
  @{attr}: ~"@{vw}vw";
}

.height (@px, @attr: height) {
  @vh: (@px / 1080) * 100;
  @{attr}: ~"@{vh}vh";
}

.marginTop (@px, @attr: margin-top) {
  @vh: (@px / 1080) * 100;
  @{attr}: ~"@{vh}vh";
}

.marginBottom (@px, @attr: margin-bottom) {
  @vh: (@px / 1080) * 100;
  @{attr}: ~"@{vh}vh";
}

.marginLeft (@px, @attr: margin-left) {
  @vw: (@px / 1920) * 100;
  @{attr}: ~"@{vw}vw";
}

.marginRight (@px, @attr: margin-right) {
  @vw: (@px / 1920) * 100;
  @{attr}: ~"@{vw}vw";
}

.paddingLeft (@px, @attr: padding-left) {
  @vw: (@px / 1920) * 100;
  @{attr}: ~"@{vw}vw";
}

.paddingRight (@px, @attr: padding-right) {
  @vw: (@px / 1920) * 100;
  @{attr}: ~"@{vw}vw";
}

.top (@px, @attr: top) {
  @vh: (@px / 1080) * 100;
  @{attr}: ~"@{vh}vh";
}

.left (@px, @attr: left) {
  @vw: (@px / 1920) * 100;
  @{attr}: ~"@{vw}vw";
}

.right (@px, @attr: right) {
  @vw: (@px / 1920) * 100;
  @{attr}: ~"@{vw}vw";
}

#container {
  .width(1920);
  .height(1080);
  overflow: hidden;
  //   background: #001047;
  background: #092560;
  background-image: url("../../../assets/images/datav/bg.jpg");
  // background-image: url("../../../assets/images/datav/fc-datav_header.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;

  // 头部
  .header {
    .width(1920);
    .height(100); // 80
    position: absolute;
    z-index: 1001;
    background-image: url("../../../assets/images/datav/fc-header.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;

    .tabs {
      color: #fff;
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      left: 1%;
      .fontSize(16);
      display: flex;
      align-items: center;

      > div {
        cursor: pointer;
      }
    }

    .header_left {
      display: flex;
      align-items: center;
      justify-content: space-between;
      position: absolute;
      top: 35%;
      transform: translateY(-50%);
      left: 1%;

      .time {
        color: rgba(255, 255, 255, 0.7);
        .fontSize(22);
        font-family: electronicFont;
      }
    }

    .header_right {
      display: flex;
      align-items: center;
      justify-content: space-between;
      position: absolute;
      top: 35%;
      transform: translateY(-50%);
      right: 1%;

      ::v-deep .el-image__inner {
        cursor: pointer;
      }

      .item {
        margin-left: 0.6vw;
        width: 1.25vw;

        .el-image__inner {
          width: 100%;
        }
      }
    }
  }

  .boxall {
    // border: 1px solid rgba(25, 186, 139, 0.17);
    position: relative;
    z-index: 10;
    box-sizing: border-box;
    // padding: 10px;
  }

  //   .boxall:before,
  //   .boxall:after {
  //     position: absolute;
  //     width: 0.6rem;
  //     height: 0.6rem;
  //     content: "";
  //     border-top: 2px solid #02a6b5;
  //     top: 0;
  //   }

  //   .boxall:before,
  //   .boxfoot:before {
  //     border-left: 2px solid #02a6b5;
  //     left: 0;
  //   }

  //   .boxall:after,
  //   .boxfoot:after {
  //     border-right: 2px solid #02a6b5;
  //     right: 0;
  //   }

  //   .boxfoot {
  //     position: absolute;
  //     bottom: 0;
  //     width: 100%;
  //     height: 90%;
  //     // .height(200);
  //     left: 0;
  //     z-index: -1;
  //   }

  //   .boxfoot:before,
  //   .boxfoot:after {
  //     position: absolute;
  //     width: 0.6rem;
  //     height: 0.6rem;
  //     content: "";
  //     border-bottom: 2px solid #02a6b5;
  //     bottom: 0;
  //   }

  .big-title {
    background: rgba(3, 31, 96, 1);
    // height: 40px;
    .height(50);
    .lineHeight(50);
    // line-height: 40px;
    text-align: center;
    font-weight: 600;
    .fontSize(20);
    // font-size: 20px;
    color: #fff;
    .marginBottom(8);
    // margin-bottom: 8px;
  }

  .tit01 {
    background: linear-gradient(
      to right,
      rgba(48, 82, 174, 1),
      rgba(48, 82, 174, 0)
    );
    color: #fff;
    .fontSize(16);
    .height(40);
    .lineHeight(40);
    .paddingLeft(10);

    .bar-history {
      .width(120);
      cursor: pointer;
    }
  }

  .history {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    margin: 6px 0;
    .btn {
      .width(120);
      cursor: pointer;
    }
  }

  .tit02 {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .cut {
    display: flex;
    align-items: center;
    color: #f1f1f1;
    cursor: pointer;

    &:hover {
      color: #fa4f59;
    }

    .xiangyoujiantou {
      .fontSize(14);
      .marginLeft(4);
    }
  }

  .insideall {
    // height: calc(100% - 50px);
    height: calc(100% - 20px);
    margin-top: 10px;
  }

  .video_box {
    // height: calc(100% - 20px);
    // height: calc(100% - 20px);
    .height(342);
    // margin-top: 10px;
  }

  // 左侧
  .left {
    .width(1885);
    .height(570);
    .marginTop(100);
    .marginLeft(15);
    position: absolute;
    display: flex;
    align-items: center;
    z-index: 1001;
    box-sizing: border-box;
    .marginBottom(15);

    .left_zero {
      .height(570);
      .width(455);

      .zero_one {
        .height(260);
        .marginBottom(15);
      }

      .zero_two {
        .height(295);
      }
    }

    .left_one {
      .height(570);
      .width(950);
      .marginLeft(15);
      background: rgba(6, 48, 109, 0.5);
    }

    .left_two {
      .height(570);
      .width(450);
      .marginLeft(15);
      background: rgba(6, 48, 109, 0.5);
    }
  }

  // 右侧
  .right {
    .width(1885);
    .height(380);
    .marginTop(685);
    .marginLeft(15);
    position: absolute;
    display: flex;
    align-items: center;
    z-index: 1001;

    .right_div {
      .width(935);
      .height(380);
      background: rgba(6, 48, 109, 0.5);
    }

    .right_alarm {
      .width(935);
      .height(380);
      .marginLeft(15);
      background: rgba(6, 48, 109, 0.5);
    }
  }

  .left1 {
    .width(450);
    .height(965);
    .marginTop(100);
    .marginLeft(15);
    position: absolute;
    display: flex;
    flex-direction: column;
    // align-items: center;
    z-index: 1001;
    box-sizing: border-box;
    // .marginBottom(15);

    .left_zero {
      .height(510);
      .width(450);
      .marginBottom(15);

      .zero_one {
        .marginBottom(15);
        .height(240);
      }

      .zero_two {
        .height(255);
        overflow: hidden;
      }
    }

    .left_two {
      .height(400);
      .width(450);
      background: rgba(6, 48, 109, 0.5);
    }
  }

  .middle1 {
    .width(700);
    .height(965);
    .marginTop(100);
    .marginLeft(480);
    position: absolute;
    display: flex;
    flex-direction: column;
    z-index: 1001;
    box-sizing: border-box;

    .left_one {
      .height(480);
      .width(700);
      .marginBottom(15);
      background: rgba(6, 48, 109, 0.5);
    }

    .right_div {
      .width(700);
      .height(374);
      background: rgba(6, 48, 109, 0.5);
    }
  }

  .right1 {
    .width(705);
    .height(965);
    .marginTop(100);
    .marginLeft(1195);
    position: absolute;
    display: flex;
    flex-direction: column;
    z-index: 1001;
    box-sizing: border-box;
  }

  .shade {
    position: fixed;
    z-index: 1001;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.5);
    transition: all 0.5s;
  }

  .frame {
    position: fixed;
    z-index: 1002;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: linear-gradient(
      to bottom,
      rgb(7, 15, 44),
      rgba(6, 48, 109, 0.8)
    );
    transition: all 0.5s;
  }

  .logo {
    width: auto;
    height: 42px;
    margin-left: 8px;
  }
}
